<template>
    <!-- pages/setpassword/index.wxml -->
    <view>
        <view class="passwordbox">
            <van-cell-group class="flexbox">
                <van-field
                    v-model="oldPassword"
                    label-class="label-class"
                    input-class="label-class"
                    center
                    clearable
                    label="旧密码:"
                    placeholder="请输入旧密码"
                    :border="false"
                    use-button-slot
                ></van-field>
                <van-field
                    v-model="password"
                    label-class="label-class"
                    input-class="label-class"
                    center
                    clearable
                    label="新密码:"
                    placeholder="请输入新密码"
                    :border="false"
                    use-button-slot
                ></van-field>
                <van-field
                    v-model="copyPassword"
                    label-class="label-class"
                    input-class="label-class"
                    center
                    clearable
                    label="确认密码:"
                    placeholder="请再次输入新密码"
                    :border="false"
                    use-button-slot
                ></van-field>
            </van-cell-group>
        </view>
        <view class="subbtn" @tap="setPassword">提交</view>
    </view>
</template>

<script>
// pages/setpassword/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            password: '',
            copyPassword: '',
            oldPassword: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 修改密码
        setPassword(e) {
            const { password, copyPassword, oldPassword } = this;

            _request
                .postObj('/settings/accountSafe/updatePassword', {
                    copyPassword,
                    password,
                    oldPassword,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.setData({
                            password: '',
                            copyPassword: '',
                            oldPassword: ''
                        });
                        uni.showToast({
                            title: '密码修改成功',
                            icon: 'none',
                            duration: 2000
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message || '密码修改失败!',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/setpassword/index.wxss */
page {
    background: #fbfbfb;
}

/* 输入框 */
.passwordbox {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 20rpx 20rpx 0 20rpx;
    height: 316rpx;
}

.flexbox {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    height: 316rpx;
}

.label-class {
    font-size: 32rpx;
}

.btn {
    height: 316rpx;
    border: 0 !important;
    font-size: 28rpx !important;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722 !important;
}

/* 提交按钮 */

.subbtn {
    width: 710rpx;
    height: 84rpx;
    background: #ff8722;
    border-radius: 21px;
    margin: 0 20rpx;
    text-align: center;
    color: white;
    line-height: 84rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 80rpx;
}
</style>
